<template>

	<popup-slot v-model:showDetails="showDetail" title="选择出行人">

		<view class="font-size14 u-flex-grow">
			<text>需要选择</text>
			<text class="color-red"> {{nums.need_people}}</text>
			<text>个出行人，</text>
			<text>还需选择</text>
			<text class="color-red">{{ nums.need_people-nums.select_people}}</text><text>个</text>
			<text>（已添加 </text>
			<text class="color-red"> {{nums.select_people}} </text>
			<text>个）</text>
		</view>

		<addPeopleVue :isRefresh="isRefresh" @select="radioChange"></addPeopleVue>
	</popup-slot>

</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		onMounted,
	} from 'vue';

	import popupSlot from './popup-slot.vue';
	import addPeopleVue from '../../user/component/add-people.vue';

	import {
		usePageStore
	} from "@/common/tools/store.js"

	import {
		getPeopleList,
		delPeople
	} from "@/common/api.js";

	const emits = defineEmits(['update:open', 'select'])
	const props = defineProps({
		open: {
			type: Boolean,
			default: false,
		},
		nums: {
			type: Object,
			default: {}
		},
		isRefresh:{
			type: Boolean,
			default:undefined
		}
	})
	const radioValue = ref(0);
	const showDetail = ref(false);
	const store = usePageStore();

	//出行人
	const peopleList = ref([]);
	
	//是否打开select弹窗
	watch(() => props.open, (n, o) => {
		showDetail.value = n;
	})
	//v-model 方式 的showDetail 双向数据
	watch(showDetail, (n, o) => {
		emits("update:open", n)
	})
	watch(()=>props.isRefresh, (n,o)=>{
		// console.log('编辑后更新')
		 fetchData();
	})

 
	//组件显示是获取数据
	onMounted(()=> fetchData())
 
	//获取出行人列表
	function fetchData() {
		getPeopleList().then((ret) => {
			peopleList.value.splice(0);			 
			peopleList.value= ret ;
		} )
	}
	//单击选择出行人
	function radioChange(people) {

		emits("update:open", false);
		// let people = peopleList.value.find((item) => item.id == radioValue.value);
		// console.log('选中了人', people)
		emits("select", people);
	}
</script>

<style lang="scss">
	.add-btn {
		border: #4A9BF7 1px solid;
		padding: 10px 20px;
		border-radius: 50px;
		color: #4A9BF7;
		font-weight: bold;
	}
</style>